<template>
	<view class="page-check-arena">
		<view v-if="errMsg" class="err-img">
			{{errMsg}}
		</view>
		<view class="arena-info" v-if="!errMsg">
			<view class="arena-info-item">
				<text class="item-title">场地：</text>
				<text>{{info.arena}}</text>
			</view>

			<view class="arena-info-item">
				<text class="item-title">半场：</text>
				<text>{{info.arena_part}}</text>
			</view>

			<view class="arena-info-item">
				<text class="item-title">日期：</text>
				<text>{{info.start_date}}</text>
			</view>

			<view class="arena-info-item">
				<text class="item-title">场次：</text>
				<text>{{info.time_fragment}}</text>
			</view>


			<view class="arena-info-item">
				<text class="item-title">用户姓名：</text>
				<text>{{info.real_name}}</text>
			</view>

			<view class="arena-info-item">
				<text class="item-title">用户手机号后4位：</text>
				<text>{{info.mobile}}</text>
			</view>
		</view>
		<view v-if="!errMsg" :class="['check-btn', isValid ? '': 'is-invalid']" @tap="onTap">
			{{btnText}}
		</view>
	</view>
</template>

<script>
	import * as arenaApi from '@/api/arena.js'
	export default {
		data() {
			return {
				bookingFragmentId: 0,
				token: '',
				errMsg: '',
				info: {},
				// 是否已到场
				hasPresent: false
			};
		},
		computed: {
			isValid() {
				return !this.info?.isExpired
			},

			btnText() {
				if (!this.isValid) {
					return '该场次已过期'
				}

				if (this.hasPresent) {
					return '已到场'
				}

				return '确认已到场'
			},

		},
		onLoad(options) {

			console.log(options)
			const url = decodeURIComponent(options.q) 

			console.log('q : ' + url)
			let p = this.getUrlParams(url);
			console.log(p)
			this.bookingFragmentId = p.id
			this.token = p.token
			

			this.checkArena(this.bookingFragmentId, this.token)
		},

		methods: {
			 getUrlParams(url) {
				// 通过 ? 分割获取后面的参数字符串
				let urlStr = url.split('?')[1]
				// 创建空对象存储参数
				let obj = {};
				// 再通过 & 将每一个参数单独分割出来
				let paramsArr = urlStr.split('&')
				for (let i = 0, len = paramsArr.length; i < len; i++) {
					// 再通过 = 将每一个参数分割为 key:value 的形式
					let arr = paramsArr[i].split('=')
					obj[arr[0]] = arr[1];
				}
				return obj
			},
			checkArena(bookingFragmentId, token) {
				arenaApi.checkBooking({
					bookingFragmentId,
					codeToken: token
				}).then(res => {
					console.log(res)
					if (res.data.used == 1) {
						this.hasPresent = true
					}
					this.info = res.data
				}).catch(err => {
					this.errMsg = err.errMsg
				})
			},

			onTap() {
				if (!this.isValid) {
					return
				}

				arenaApi.present({
					bookingFragmentId: this.bookingFragmentId,
					codeToken: this.token
				}).then(res => {
					console.log(res)
					this.$success(res.message, () => {
						this.hasPresent = true
					})

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-check-arena {
		padding: 60rpx 100rpx;

		.arena-info {
			.arena-info-item {
				font-size: 16px;
				line-height: 2;

				.item-title {
					font-weight: 600;
				}
			}
		}

		.check-btn {
			width: 100%;
			height: 86rpx;
			margin-top: 70rpx;
			background: linear-gradient(0deg, #3250FA, #826EF0);
			text-align: center;
			line-height: 86rpx;
			color: #fff;
			border-radius: 80rpx;
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
			letter-spacing: 5rpx;

			&.is-invalid {
				background: #2C405A;
			}
		}
	}
</style>
